<template>
  <div class="app-container">
    <Find @Launchform="Launchform5" :OriginalFilter="{ static: true }" :formList="formList1" />
    <Find @findClicked="findData" :searchImg="false" @Launchform="Launchform6" :OriginalFilter="{ static: true }" :formList="formList2" />

    <el-card style="margin-top: 15px">
      <div style="display: flex">
        <div style="width: 30%" class="tree-container">
          <el-tree
            style="max-width: 400px; max-height: 570px; overflow-y: auto; border: 1px solid"
            :data="HomeLeftDateParmsTableDate"
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
          </el-tree>
        </div>

        <div style="width: 70%">
          <Table
            :summaryData="summaryData"
            summary
            @currentRow1="currentRow1"
            @download="download"
            :isLoading="isLoading1"
            :tableHeader="tableHeader"
            :tableData="RightTableDate"
            :TableHeight="92"
          />
          <PageModule
            :PageData="{ buttonS: true, total: totalL }"
            :layout="'prev, pager'"
            @pageChange="pageChangeL"
            @pageSizeChange="pageSizeChangeL"
          />
        </div>
      </div>

      <div style="background-color: #003366; display: flex; justify-content: space-between; width: 100%">
        <div style="cursor: pointer" v-for="(item, index) in homepageQueryParms" :key="index" @click="clickDate(item)">
          <h1 style="font-size: 18px; color: #ffffff">
            {{ item?.title }}<span style="font-size: 18px; margin-left: 10px; color: red">{{ item?.unfinishCount }}单</span>&nbsp;&nbsp;<span
              style="font-size: 16px"
              >{{ item?.orderQty === 0 ? '100' : Math.ceil((item?.finishQty / item?.orderQty) * 100) }}%</span
            >
          </h1>
          <div
            style="
              width: 100%;
              font-size: 15px;
              height: 20px;
              border: 1px #986db2 solid;
              padding: 0px;
              display: inline-block;
              position: relative;
              border-radius: 5px;
              overflow: hidden;
              background-color: #fff;
            "
          >
            <div
              :style="{
                width: item?.orderQty === 0 ? '100%' : Math.ceil((item?.finishQty / item?.orderQty) * 100) + '%',
                height: '18px',
                backgroundColor: '#986db2',
                display: 'inline-block',
                position: 'relative'
              }"
            >
              <span style="color: black; font-weight: bold; position: absolute; width: 100%; text-align: center">
                {{ item?.finishQty }}
              </span>
            </div>
            <span style="float: right; display: inline-block; position: absolute; right: 10px; color: #f00; font-weight: bold; margin-right: -10px">
              {{ item?.orderQty }}<span></span>
            </span>
          </div>
        </div>
      </div>
    </el-card>

    <el-dialog :title="title" v-model="dialogVisible1" width="80%" class="dialog pb0">
      <Find @findClicked="findData2" @Launchform="Launchform" :OriginalFilter="{ static: true }" :formList="formList3" />
      <Table
        style="margin-top: 15px"
        @download="download1"
        :isLoading="isLoading2"
        :tableHeader="tableHeader3"
        :tableData="detialListQueryTableDate"
        :TableHeight="99"
      />
      <PageModule :PageData="{ buttonS: true, total }" :layout="'prev, pager'" @pageChange="pageChange" @pageSizeChange="pageSizeChange" />
    </el-dialog>

    <el-dialog :title="title" v-model="dialogVisible" width="30%" class="dialog pb0">
      <div>
        <div>
          <span>出库日期:</span>
          <el-date-picker
            style="width: 180px"
            v-model="ShipmentAdditionsParms.collectTime"
            type="date"
            :placeholder="formatCurrentDate(currentDate)"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />

          <span style="margin-left: 43px">PO:</span> <el-input style="width: 100px" v-model="ShipmentAdditionsParms.poNo" />
        </div>

        <div style="margin-top: 20px">
          <span style="margin-left: 30px">双数:</span>
          <el-input-number style="width: 180px" v-model="ShipmentAdditionsParms.pairQty" :min="0" :max="ShipmentAdditionsParms.caseQty" />
          <span style="margin-left: 6px">剩余双数:</span> <el-input style="width: 100px" :disabled="true" v-model="ShipmentAdditionsParms.caseQty" />
        </div>

        <div style="margin-top: 20px">
          <span style="margin-left: 17px">发票号:</span> <el-input style="width: 180px" v-model="ShipmentAdditionsParms.invoiceNo" />
          <span style="margin-left: 35px">柜号:</span> <el-input style="width: 100px" v-model="ShipmentAdditionsParms.containerNo" />
        </div>

        <el-button style="margin-top: 50px; margin-left: 27px" type="primary" size="default" @click="ShipmentAdditionsMethods">出库</el-button>
        <el-button style="margin-top: 50px" type="info" size="default" @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" v-model="dialogVisible3" width="30%" class="dialog pb0">
      <div>
        <div><span style="margin-left: 6px">指令:</span> <el-input style="width: 100px" :disabled="true" v-model="orderQtyList.factoryLotNo" /></div>
        <div style="margin-top: 15px">
          <span style="margin-left: 6px">冲裁:</span> <el-input-number style="width: 180px" v-model="orderQtyList.cutQty" :min="0" :max="rowList" />
          <el-checkbox v-model="orderQtyList.cutSample" style="margin-left: 15px" label="冲裁试做" value="Value 1" />
        </div>
        <div style="margin-top: 15px">
          <span style="margin-left: 6px; margin-top: 15px">工艺:</span>
          <el-input-number style="width: 180px" v-model="orderQtyList.caseQty" :min="0" :max="rowList" /><el-checkbox
            v-model="orderQtyList.antenatalSample"
            style="margin-left: 15px"
            label="产前样"
            value="Value 1"
          />
        </div>
        <div style="margin-top: 15px">
          <span style="margin-left: 6px; margin-top: 15px">配套:</span>
          <el-input-number style="width: 180px" v-model="orderQtyList.matchQty" :min="0" :max="rowList" /><el-checkbox
            v-model="orderQtyList.tryOnSample"
            style="margin-left: 15px"
            label="试穿样"
            value="Value 1"
          />
        </div>
        <div style="margin-top: 15px">
          <span style="margin-left: 6px; margin-top: 15px">针车:</span>
          <el-input-number style="width: 180px" v-model="orderQtyList.stitchQty" :min="0" :max="rowList" /><el-checkbox
            v-model="orderQtyList.testSample"
            style="margin-left: 15px"
            label="测试样"
            value="Value 1"
          />
        </div>
        <div style="margin-top: 15px">
          <span style="margin-left: 6px; margin-top: 15px">大底:</span>
          <el-input-number style="width: 180px" v-model="orderQtyList.outSoleQty" :min="0" :max="rowList" /><el-checkbox
            v-model="orderQtyList.cfsSample"
            style="margin-left: 15px"
            label="CFS样"
            value="Value 1"
          />
        </div>
        <div style="margin-top: 15px">
          <span style="margin-left: 6px; margin-top: 15px">鞋垫:</span>
          <el-input-number style="width: 180px" v-model="orderQtyList.insoleQty" :min="0" :max="rowList" /><el-checkbox
            v-model="orderQtyList.rawMaterial"
            style="margin-left: 15px"
            label="原材料"
            value="Value 1"
          />
        </div>
        <div style="margin-top: 15px">
          <span style="margin-left: 6px; margin-top: 15px">成型:</span>
          <el-input-number style="width: 180px" v-model="orderQtyList.finishQty" :min="0" :max="rowList" /><el-checkbox
            v-model="orderQtyList.shoelace"
            style="margin-left: 15px"
            label="鞋带"
            value="Value 1"
          />
        </div>
        <div style="margin-top: 15px">
          <span style="margin-left: 6px; margin-top: 15px">备注修改:</span> <el-input style="width: 100px" v-model="orderQtyList.remark" />
        </div>
      </div>

      <el-button type="primary" size="default" @click="saveMethods">保存</el-button>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'ProductionCollection'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted } from 'vue'
import {
  HomeLeftDate,
  RightTable,
  detialListQuery,
  deleteDetial,
  ShipmentAdditions,
  save,
  homepageQuery
} from '@/api/Control/WEB/ProductionCollection'
import { ElMessage, ElMessageBox } from 'element-plus'
import { cloneDeep, debounce } from 'lodash'
const formList1 = ref<any>([
  {
    type: 'date',
    dateLabel: '下单月份',
    dateValue: ''
  },
  {
    type: 'select1',
    selectValue1: '',
    selectP: '分组字段',
    selectLabel: '部门',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: 'brand',
        optionLabel: '品牌'
      },
      {
        optionKey: '2',
        optionValue: 'vendorAbbr',
        optionLabel: '工厂'
      },
      {
        optionKey: '3',
        optionValue: 'deliveryDate',
        optionLabel: '交期'
      },
      {
        optionKey: '4',
        optionValue: 'styleNo',
        optionLabel: '货号'
      }
    ]
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '完成状态',
    selectLabel: '',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '成型未完成',
        optionLabel: '成型未完成'
      },
      {
        optionKey: '2',
        optionValue: '全部',
        optionLabel: '全部'
      },
      {
        optionKey: '3',
        optionValue: '成型已完成',
        optionLabel: '成型已完成'
      }
    ]
  }
])

const formList2 = ref([
  {
    type: 'input',
    inputPlaceholder: '工厂指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '货号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '客户型体',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '大底厂商',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '楦头编号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '冲刀编号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '大底编号',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '搜索'
  },
  {
    type: 'button',
    checkboxLabel: '置空'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  }
])

const formList3 = ref([
  {
    type: 'select1',
    selectValue: '',
    selectP: '操作类型',
    selectLabel: '部门',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '所有',
        optionLabel: '所有'
      },
      {
        optionKey: '2',
        optionValue: '缴库',
        optionLabel: '缴库'
      },
      {
        optionKey: '3',
        optionValue: '发货',
        optionLabel: '发货'
      }
    ]
  },
  {
    type: 'input',
    inputPlaceholder: 'PO号码',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '搜索'
  },
  {
    type: 'button',
    checkboxLabel: '置空'
  }
])

// 总数
const summaryData = ref([
  {
    index: 5,
    num: 0
  },
  {
    index: 17,
    num: 0
  },
  {
    index: 18,
    num: 0
  },
  {
    index: 19,
    num: 0
  },
  {
    index: 20,
    num: 0
  },
  {
    index: 21,
    num: 0
  },
  {
    index: 22,
    num: 0
  },
  {
    index: 23,
    num: 0
  },
  {
    index: 24,
    num: 0
  }
])

// 统计查询
const homepageQueryParms = ref<any>([])

const homepageQueryMethods = async () => {
  try {
    const result = await homepageQuery(RightTableParms.value)
    homepageQueryParms.value = result
  } catch (error) {
    JMessage.error('统计查询出错')
  }
}

// 修改
const dialogVisible3 = ref(false)

const orderQtyList = ref<any>({})

const rowList = ref()

const currentRow1 = (row: any) => {
  orderQtyList.value = cloneDeep(row)
  title.value = `修改工厂指令【${row.factoryLotNo}】,订单数${row.orderQty}`

  rowList.value = row.orderQty
  console.log(row)
  dialogVisible3.value = true
}

const saveMethods = async () => {
  console.log(orderQtyList.value)

  if (orderQtyList.value.cutSample === true) {
    orderQtyList.value.cutSample = 1
  } else {
    orderQtyList.value.cutSample = 0
  }

  if (orderQtyList.value.antenatalSample === true) {
    orderQtyList.value.antenatalSample = 1
  } else {
    orderQtyList.value.antenatalSample = 0
  }

  if (orderQtyList.value.tryOnSample === true) {
    orderQtyList.value.tryOnSample = 1
  } else {
    orderQtyList.value.tryOnSample = 0
  }

  if (orderQtyList.value.testSample === true) {
    orderQtyList.value.testSample = 1
  } else {
    orderQtyList.value.testSample = 0
  }

  if (orderQtyList.value.cfsSample === true) {
    orderQtyList.value.cfsSample = 1
  } else {
    orderQtyList.value.cfsSample = 0
  }

  if (orderQtyList.value.rawMaterial === true) {
    orderQtyList.value.rawMaterial = 1
  } else {
    orderQtyList.value.rawMaterial = 0
  }

  if (orderQtyList.value.shoelace === true) {
    orderQtyList.value.shoelace = 1
  } else {
    orderQtyList.value.shoelace = 0
  }

  try {
    const result = await save(orderQtyList.value)

    if (result.code === 200) {
      RightTableMethods()
      dialogVisible3.value = false
      JMessage.success(result.message)
    } else {
      JMessage.error(result.message)
    }
  } catch (error) {
    JMessage.warning('保存出错')
  }
}

// 出货新增
const ShipmentAdditionsParms = ref<any>({
  addPrice: '',
  caseQty: '',
  collectTime: '',
  collectType: '',
  companyId: '',
  containerNo: '',
  groupNo: '',
  invoiceNo: '',
  lotNo: '',
  pairQty: '',
  poNo: '',
  sysDate: '',
  sysUser: '',
  vendorName: '',
  vendorNo: ''
})

const ShipmentAdditionsMethods = async () => {
  if (
    ShipmentAdditionsParms.value.collectTime === '' ||
    ShipmentAdditionsParms.value.containerNo === '' ||
    ShipmentAdditionsParms.value.containerNo === ''
  ) {
    JMessage.warning('出库日期柜号和发票号不可为空')
  } else {
    try {
      const result = await ShipmentAdditions(ShipmentAdditionsParms.value)

      if (result.code === 200) {
        RightTableMethods()
        dialogVisible.value = false
        JMessage.success(result.message)
      } else {
        JMessage.error(result.message)
      }
    } catch (error) {
      JMessage.error('出货新增出错请重试')
    }
  }
}

// 日期
const formatCurrentDate = (date?: any) => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  let newMonth = month > 10 ? month : '0' + month
  let newDay = day > 10 ? day : '0' + day
  return `${year}-${newMonth}-${newDay}`
}

const currentDate = ref(new Date())

// 明细删除
const deleteDetialMethods = async (row: any) => {
  try {
    const result = await deleteDetial(row)
    if (result.code === 200) {
      detialListQueryMethods()
      JMessage.success(result.message)
    } else {
      JMessage.error(result.message)
    }
  } catch (error) {
    JMessage.error('删除出错请重试')
  }
}

const handleCloseMateriaLKlc = (row: any) => {
  ElMessageBox.confirm('确认要删除数据吗?')
    .then(async () => {
      deleteDetialMethods(row)
    })
    .catch(() => {})
}

const findData2 = (row: string) => {
  if (row === '搜索') {
    detialListQueryMethods()
  }
}

const download1 = (row: any, label: any) => {
  if (label.label === '删除') {
    handleCloseMateriaLKlc(row)
  }
}

const isLoading2 = ref(false)

const dialogVisible1 = ref(false)

// 明细查询
const Launchform = (row: any) => {
  detialListQueryParms.value.collectType = row[0].selectValue
  detialListQueryParms.value.poNo = row[1].inputValue
}

const detialListQueryParms = ref({
  collectType: '',
  factoryLotNo: '',
  orderFile: '',
  orderType: '',
  pageNum: 1,
  pageSize: 40,
  poNo: ''
})

const total = ref(0)

const pageChange = (val: any) => {
  detialListQueryParms.value.pageNum = val
  detialListQueryMethods()
}

const pageSizeChange = (val: any) => {
  detialListQueryParms.value.pageSize = val
  detialListQueryMethods()
}

const detialListQueryTableDate = ref([])

const detialListQueryMethods = async () => {
  isLoading2.value = true
  try {
    const result = await detialListQuery(detialListQueryParms.value)
    detialListQueryTableDate.value = result.dto
    total.value = result.total
    isLoading2.value = false
  } catch (error) {
    JMessage.error('明细查询出错')
    isLoading2.value = false
  }
}

// 明细
const title = ref('')

const dialogVisible = ref(false)

const download = (row: any, label: any) => {
  if (label.label === '明细') {
    title.value = `工厂指令【${row.factoryLotNo}】成品出库明细`
    dialogVisible1.value = true
    detialListQueryParms.value.factoryLotNo = row.factoryLotNo
    detialListQueryMethods()
  }

  if (label.label === '出货') {
    ShipmentAdditionsParms.value.collectTime = ''
    ShipmentAdditionsParms.value.poNo = ''
    ShipmentAdditionsParms.value.pairQty = ''
    // ShipmentAdditionsParms.value.invoiceNo = ''
    // ShipmentAdditionsParms.value.containerNo = ''

    title.value = `工厂指令【${row.factoryLotNo}】成品出库作业`
    ShipmentAdditionsParms.value.caseQty = row.orderQty - row.outQty

    ShipmentAdditionsParms.value.lotNo = row.factoryLotNo
    ShipmentAdditionsParms.value.vendorName = row.vendorAbbr
    ShipmentAdditionsParms.value.vendorNo = row.vendorNo
    ShipmentAdditionsParms.value.collectType = row.collectType
    ShipmentAdditionsParms.value.sysDate = row.sysDate
    ShipmentAdditionsParms.value.sysUser = row.sysUser

    dialogVisible.value = true
  }
}

// 主表查询
const RightTableParms = ref<any>({
  brand: '',
  custStyle: '',
  customOrderDateEnd: '',
  customOrderDateStart: '',
  cutTool: '',
  deliveryDate: '',
  factoryLotNo: '',
  finalFlag: '',
  groupField: null,
  lastMold: '',
  orderField: '',
  orderType: '',
  pageNum: 1,
  pageSize: 40,
  solePart: '',
  soleVendor: '',
  styleNo: '',
  vendorAbbr: ''
})

const Launchform6 = (row: any) => {
  RightTableParms.value.factoryLotNo = row[0].inputValue
  RightTableParms.value.styleNo = row[1].inputValue
  RightTableParms.value.custStyle = row[2].inputValue
  RightTableParms.value.soleVendor = row[3].inputValue
  RightTableParms.value.lastMold = row[4].inputValue
  RightTableParms.value.cutTool = row[5].inputValue
  RightTableParms.value.solePart = row[6].inputValue
}

const findData = (row: string) => {
  if (row === '搜索') {
    RightTableMethods()
  }
  if (row === '置空') {
    RightTableParms.value.brand = ''
    formList2.value.forEach((item: any) => {
      item.inputValue = ''
    })
  }
}

const totalL = ref(0)

const pageChangeL = (val: any) => {
  RightTableParms.value.pageNum = val
  RightTableMethods()
}

const pageSizeChangeL = (val: any) => {
  RightTableParms.value.pageSize = val
  RightTableMethods()
}

const isLoading1 = ref(false)

const RightTableDate = ref([])

// 点击查询
const clickDate = async (item: any) => {}

const RightTableMethods = async () => {
  isLoading1.value = true
  try {
    const result = await RightTable(RightTableParms.value)
    RightTableDate.value = result.dto.map((item: any) => {
      if (item.complete === '0' || item.complete === null) {
        item.complete = false
      } else {
        item.complete = true
      }

      if (item.cutSample === '0' || item.cutSample === null) {
        item.cutSample = false
      } else {
        item.cutSample = true
      }

      if (item.antenatalSample === '0' || item.antenatalSample === null) {
        item.antenatalSample = false
      } else {
        item.antenatalSample = true
      }

      if (item.tryOnSample === '0' || item.tryOnSample === null) {
        item.tryOnSample = false
      } else {
        item.tryOnSample = true
      }

      if (item.testSample === '0' || item.testSample === null) {
        item.testSample = false
      } else {
        item.testSample = true
      }

      if (item.cfsSample === '0' || item.cfsSample === null) {
        item.cfsSample = false
      } else {
        item.cfsSample = true
      }

      if (item.rawMaterial === '0' || item.rawMaterial === null) {
        item.rawMaterial = false
      } else {
        item.rawMaterial = true
      }

      if (item.shoelace === '0' || item.shoelace === null) {
        item.shoelace = false
      } else {
        item.shoelace = true
      }

      item.customOrderDate1 = item.customOrderDate
      item.customOrderDate1 = item.customOrderDate1.split('-').slice(0, 2).join('-')

      return item
    })
    if (RightTableDate.value.length !== 0) {
      summaryData.value[0].num = result.orderQtySum

      summaryData.value[1].num = result.cutQtySum
      summaryData.value[2].num = result.craftQtySum
      summaryData.value[3].num = result.matchQtySum
      summaryData.value[4].num = result.stitchQtySum
      summaryData.value[5].num = result.outSoleQtySum
      summaryData.value[6].num = result.insoleQtySum
      summaryData.value[7].num = result.finishQtySum
    }
    totalL.value = result.total
    isLoading1.value = false
  } catch (error) {
    isLoading1.value = false
    JMessage.error('表格数据查询出错')
  }
}

// 主页侧边栏数据
const HomeLeftDateParms = ref<any>({
  brand: '',
  custStyle: '',
  customOrderDateEnd: '',
  customOrderDateStart: '',
  cutTool: '',
  deliveryDate: '',
  factoryLotNo: '',
  finalFlag: '',
  groupField: null,
  lastMold: '',
  orderField: '',
  orderType: '',
  pageNum: '',
  pageSize: '',
  solePart: '',
  soleVendor: '',
  styleNo: '',
  vendorAbbr: ''
})

const Launchform5 = (row: any) => {
  if (row[1].selectValue1.length === 0) {
    HomeLeftDateParms.value.groupField = ['brand', 'vendorAbbr', 'deliveryDate', 'styleNo']
    formList1.value[1].selectValue1 = ['brand', 'vendorAbbr', 'deliveryDate', 'styleNo']
  } else {
    HomeLeftDateParms.value.groupField = row[1].selectValue1
  }

  HomeLeftDateParms.value.customOrderDateStart = row[0].dateValue[0]
  HomeLeftDateParms.value.customOrderDateEnd = row[0].dateValue[1]
  HomeLeftDateParms.value.finalFlag = row[2].selectValue

  console.log(row)
  if (HomeLeftDateParms.value.finalFlag === '成型未完成') {
    HomeLeftDateParms.value.finalFlag = 0
  }
  if (HomeLeftDateParms.value.finalFlag === '成型已完成') {
    HomeLeftDateParms.value.finalFlag = 1
  }
  if (HomeLeftDateParms.value.finalFlag === '全部') {
    HomeLeftDateParms.value.finalFlag = ''
  }
  HomeLeftDateMethods()
}

const defaultProps = {
  children: 'children',
  label: 'title'
}

const handleNodeClick = (row: any) => {
  const { type } = row
  const validFields = ['brand', 'vendorAbbr', 'deliveryDate', 'styleNo']

  // 遍历有效字段，只赋值对应的或清空其他字段
  validFields.forEach((field: any) => {
    if (field === type) {
      RightTableParms.value[field] = row.title || '' // 赋值，如果 row[field] 不存在则赋值为空字符串
    } else {
      RightTableParms.value[field] = '' // 其他字段置空
    }
  })

  RightTableMethods()
  homepageQueryMethods()
}

const HomeLeftDateParmsTableDate = ref([])

const loading = ref(false)

const HomeLeftDateMethods = async () => {
  loading.value = true
  try {
    const result = await HomeLeftDate(HomeLeftDateParms.value)
    HomeLeftDateParmsTableDate.value = result
    if (result.length !== 0) {
      // handleNodeClick(result[0])
      RightTableMethods()
      homepageQueryMethods()
    }
    loading.value = false
  } catch (error) {
    loading.value = false
    JMessage.error('右方表格查询出错')
  }
}

const tableHeader = ref([
  {
    type: 'function',
    width: '200px',
    label: '操作',
    prop: [{ label: '出货' }, { label: '明细', bgColor: '#1C84C6' }]
  },
  {
    label: '工厂',
    prop: 'vendorAbbr',
    change: true
  },
  {
    label: '品牌',
    prop: 'brand',
    change: true
  },
  {
    label: '工厂指令号',
    prop: 'factoryLotNo',
    change: true
  },
  {
    label: '鞋图',
    prop: 'photoPath',
    change: true
  },
  {
    label: '订单数',
    prop: 'orderQty',
    change: true
  },
  {
    label: '下单日期',
    prop: 'customOrderDate',
    change: true
  },
  {
    label: '交期',
    prop: 'deliveryDate',
    change: true
  },
  {
    label: '结案',
    prop: 'complete',
    type: 'svg',
    change: true
  },
  {
    label: '预计生产',
    prop: 'predicProdDate',
    change: true
  },
  {
    label: '冲刀试做',
    prop: 'cutSample',
    type: 'svg',
    change: true
  },
  {
    label: '产前样',
    prop: 'antenatalSample',
    type: 'svg',
    change: true
  },
  {
    label: '试穿样',
    prop: 'tryOnSample',
    type: 'svg',
    change: true
  },
  {
    label: '测试样',
    prop: 'testSample',
    type: 'svg',
    change: true
  },

  {
    label: 'CFS样',
    prop: 'cfsSample',
    type: 'svg',
    change: true
  },
  {
    label: '原材料',
    prop: 'rawMaterial',
    type: 'svg',
    change: true
  },
  {
    label: '鞋带',
    prop: 'shoelace',
    type: 'svg',
    change: true
  },
  {
    label: '冲裁',
    prop: 'cutQty'
  },
  {
    label: '工艺',
    prop: 'craftQty'
  },
  {
    label: '配套',
    prop: 'matchQty'
  },
  {
    label: '针车',
    prop: 'stitchQty'
  },
  {
    label: '大底',
    prop: 'outSoleQty'
  },
  {
    label: '鞋垫',
    prop: 'insoleQty'
  },
  {
    label: '成型',
    prop: 'finishQty'
  },
  {
    label: '出货',
    prop: 'outQty',
    change: true
  },
  {
    label: '制单日期',
    prop: 'createDate',
    change: true
  },

  {
    label: '制单人',
    prop: 'createUserName',
    change: true
  },
  {
    label: '货号',
    prop: 'styleNo',
    change: true
  },
  {
    label: '颜色',
    prop: 'styleColor',
    change: true
  },
  {
    label: '季度',
    prop: 'season',
    change: true
  },
  {
    label: '订单类型',
    prop: 'orderType',
    change: true
  },
  {
    label: '工厂合同号',
    prop: 'factoryContractNo',
    change: true
  },
  {
    label: '客人PI号',
    prop: 'customPiNo',
    change: true
  },
  {
    label: '客户型体',
    prop: 'customStyle',
    change: true
  },
  {
    label: '大底厂商',
    prop: 'soleVendor',
    change: true
  },
  {
    label: '楦头编号',
    prop: 'lastMold',
    change: true
  },
  {
    label: '冲刀编号',
    prop: 'cutTool',
    change: true
  },
  {
    label: '大底编号',
    prop: 'solePart',
    change: true
  },
  {
    label: '备注',
    prop: 'remark'
  }
])

const tableHeader3 = ref([
  {
    label: '类型',
    prop: 'collectType'
  },
  {
    label: '出库日期',
    prop: 'collectTime'
  },
  {
    label: '工厂编码',
    prop: 'vendorNo'
  },
  {
    label: '工厂',
    prop: 'vendorName'
  },
  {
    label: '双数',
    prop: 'pairQty'
  },
  {
    label: '货柜号',
    prop: 'containerNo'
  },
  {
    label: '发票号',
    prop: 'invoiceNo'
  },
  {
    label: '配码',
    prop: 'groupNo'
  },
  {
    label: 'PO',
    prop: 'poNo'
  },
  {
    label: '操作员',
    prop: 'sysUser'
  },
  {
    label: '操作时间',
    prop: 'sysDate'
  },
  {
    type: 'function',
    width: '200px',
    label: '操作',
    prop: [{ label: '删除', bgColor: '#FF0000' }]
  }
])

onMounted(() => {})
</script>

<style lang="less" scoped>
:deep(.el-select .el-input__wrapper) {
  width: 180px;
}

/* 树形结构节点添加连线 */
.tree .el-tree-node {
  position: relative;
  // padding-left: 16px;
}

.tree .el-tree-node__children {
  padding-left: 16px;
}

.tree .el-tree-node :last-child:before {
  height: 38px;
}

.tree .el-tree > .el-tree-node:before {
  border-left: none;
}
.tree-container .el-tree > .el-tree-node:after {
  border-top: none;
}

.tree .el-tree-node__children .el-tree-node:before {
  content: '';
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.tree .el-tree-node:after {
  content: '';
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}
.tree .el-tree-node__expand-icon.is-leaf {
  display: none;
}

.tree .el-tree-node:before {
  border-left: 1px dashed #dddddd;
  bottom: 0px;
  height: 100%;
  top: -26px;
  width: 1px;
}

.tree .el-tree-node:after {
  border-top: 1px dashed #dddddd;
  height: 20px;
  top: 12px;
  width: 24px;
}
.tree .custom-tree-node {
  padding-left: 10px;
}
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 100px;
}

.progress-container {
  display: flex;
  justify-content: center;
}

.ellipse {
  width: 200px;
  height: 100px;
  border: 5px solid #3498db;
  border-radius: 100px; /* Create an ellipse */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  position: relative;
  background-color: #ecf0f1; /* Light background */
}

.completed {
  font-size: 24px;
  color: #2ecc71; /* Green color for completed */
}

.pending {
  font-size: 24px;
  color: #e74c3c; /* Red color for pending */
}
</style>
